Static files in Django

Manish Patel

Aug 24, 2023

STATIC FILES

  • Static files include CSS, JavaScript, images, and other assets that are served directly to the client without any processing by Django.

1. Project-Level Static Files:

Create a directory named “static” at the project’s root directory. This directory will hold static files that are shared across different apps within your project.

myproject/
├── myproject/
├── myapp/
├── static/  # Project-level static files directory
│   ├── css/
│   │   ├── styles.css
│   ├── js/
│   │   ├── script.js
│   ├── img/
│   │   ├── logo.png

SETTINGS CONFIGURATION

  • In your settings.py file, define the URL and directory for serving static files:
STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR, 'static']

Here, STATIC_URL is the URL prefix for serving static files, and STATICFILES_DIRS points to the directory where your project-level static files are stored.

2. App-Level Static Files:

  • Each app in your project can also have its own static files.
  • Create a directory named “static” within each app’s directory to hold app-specific static files.
myapp/
├── static/  # App-level static files directory
│   ├── myapp/
│   │   ├── css/
│   │   │   ├── app_styles.css
│   │   ├── js/
│   │   │   ├── app_script.js
│   │   ├── img/
│   │   │   ├── app_logo.png
  • Django automatically looks for an “app_name/static” directory within each app to serve app-specific static files.

3. Using Static Files in Templates:

To use static files in your templates, load the {% static %} template tag. For example, in an HTML template:

<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<script src="{% static 'js/script.js' %}"></script>
<img src="{% static 'img/logo.png' %}" alt="Logo">
  • The {% static %} template tag generates the URL for the static file based on the configured STATIC_URL and the path you provide.

DEMONSTRATION

A simple Django project that demonstrates the usage of static files, such as CSS and images, to style and enhance a webpage.

1. Create a new Django project and an app:

# Create the project
django-admin startproject staticdemo

# Move into the project directory
cd staticdemo

# Create an app named "static_demo"
python manage.py startapp staticapp

2. Register app in the project settings (staticdemo/settings.py):

3. Create static files:

  • Inside the app directory (staticapp), create a new directory named static:
mkdir static
  • Within the static directory, create subdirectories for your static files:
mkdir css
mkdir img

image.png

CSS CONFIGURATION

Place a CSS file (styles.css) and an image file (logo.png) inside their respective directories.


/* styles.css */

/* Body styles */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

/* Header styles */
h1 {
    color: #333;
    text-align: center;
    padding: 20px;
    background-color: #3ab1cc;
    margin: 0;
}


/* Image styles */
img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
    padding: 20px;
}

1. Define a URL pattern for the app in the project -(staticdemo/urls.py)

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include('staticapp.urls'))
]

4. Define a URL pattern for the view (staticapp/urls.py):

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

5. Create a view (staticapp/views.py):

from django.shortcuts import render

def index(request):
    return render(request, 'staticapp/index.html')

6. Create HTML templates:

Create a directory named templates within the staticapp app directory (staticapp/templates/). Inside the templates directory, create a file named index.html:

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Static Demo</title>
    <link rel="stylesheet" type="text/css" href="{% static 'staticapp/css/styles.css' %}">
</head>
<body>
    <h1>Static Files Demo</h1>
    <img src="{% static 'staticapp/img/logo.png' %}" alt="Logo" width="200" height="100">
</body>
</html>

7. Run the development server:

python manage.py runserver
  • access the static files demonstration by opening your browser and navigating to http://127.0.0.1:8000/static_demo/.
  • You should see the webpage styled using the styles.css file and displaying the image from the img directory.
  • Inspect the page source to check the css path

Manish Patel